<template>
  <div class="Delivery-wrap">
    <!-- 使用Dialog -->
    <el-dialog
      title="发货"
      :visible.sync="$store.state.delivery.dialogTableVisible"
    >
      <!-- 订单信息 -->
      <el-card class="delivery-card">
        <div slot="header" class="clearfix">
          <span>订单信息</span>
        </div>
        <div>
          <el-descriptions border>
            <el-descriptions-item label="用户">{{
              $store.state.delivery.info.cusName
            }}</el-descriptions-item>
            <el-descriptions-item label="商品">{{
              $store.state.delivery.info.prodName
            }}</el-descriptions-item>
            <el-descriptions-item label="数量">{{
              $store.state.delivery.info.prodNum
            }}</el-descriptions-item>
            <el-descriptions-item label="下单人">{{
              $store.state.delivery.info.orderUserName
            }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{
              $store.state.delivery.info.orderTime
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <!-- 收货信息 -->
      <el-card class="takeGoods-card">
        <div slot="header" class="clearfix">
          <span>收货信息</span>
        </div>
        <div>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="收货人" prop="takeGoodsUserName">
              <el-input
                type="text"
                v-model="ruleForm.takeGoodsUserName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input
                type="text"
                v-model="ruleForm.phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="address">
              <el-input
                type="text"
                v-model="ruleForm.address"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="物流单号">
              <el-input
                type="text"
                disabled
                v-model="$store.state.delivery.info.logisticsCode"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item class="submit-btn flex">
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderSendApi } from "@/http/api.js";
export default {
  data() {
    var validateTakeGoodsUserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入收货人名称"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入收货人的联系电话"));
      } else {
        if (!this.isPhone(value)) {
          callback(new Error("请输入正确的电话格式"));
        } else {
          callback();
        }
      }
    };
    var validateAddress = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入收货人收货地址"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        takeGoodsUserName: "",
        phone: "",
        address: "",
      },
      rules: {
        takeGoodsUserName: [
          { validator: validateTakeGoodsUserName, trigger: "blur" },
        ],
        phone: [{ validator: validatePhone, trigger: "blur" }],
        address: [{ validator: validateAddress, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 提交后关闭，执行关闭后执行请求
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getOrderSend();
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    isPhone(phone) {
      let reg = new RegExp(
        /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      );
      return reg.test(phone);
    },
    async getOrderSend() {
      let params = {
        serialNo: this.$store.state.delivery.info.serialNo,
        receiver: this.ruleForm.takeGoodsUserName,
        linkPhone: this.ruleForm.phone,
        address: this.ruleForm.address,
        logisticsCode: this.$store.state.delivery.info.logisticsCode,
      };
      try {
        let res = await getOrderSendApi(params);
        console.log(res);
        this.$message({
          message: "发货成功",
          type: "success",
        });
        this.$emit('reSend')
        this.$store.commit('delivery/changeDialogShow',false)
      } catch (e) {
        this.$message({
          message: "此货已发货",
          type: "warning",
        });

      }
    },
  },
  mounted() {
    console.log(this.$store.state.delivery.info);
    this.info = this.$store.state.delivery.info;
  },
};
</script>
 
<style lang="less" scoped>
.Delivery-wrap {
  .delivery-card {
    margin-bottom: 20px;
  }
  .submit-btn {
    justify-content: flex-end;
  }
}
</style>